import React, { useState } from 'react';
import '../css/AddAdmin.css'
import myAxios from '../service/myAxios'
import md5 from 'js-md5'
import {
	Form,
	Input,
	Upload, message,
	InputNumber,
	Cascader,
	Select,
	Row,
	Col,
	Checkbox,
	Button,
	AutoComplete,
  } from 'antd';


  const { Option } = Select;
  

  

  const formItemLayout = {
	labelCol: {
	  xs: {
		span: 24,
	  },
	  sm: {
		span: 8,
	  },
	},
	wrapperCol: {
	  xs: {
		span: 24,
	  },
	  sm: {
		span: 16,
	  },
	},
  };

  const tailFormItemLayout = {
	wrapperCol: {
	  xs: {
		span: 24,
		offset: 0,
	  },
	  sm: {
		span: 16,
		offset: 8,
	  },
	},
  };
  


export default function AddAdmin() {

	const [form] = Form.useForm();

	const onFinish = (values) => {
		const admin ={
			username : values.username,
			password : md5(values.password),
			nickname: values.nickname,
			headImgUrl : "",
			phone : values.phone,
			sex : values.sex
		}
		myAxios.post("user/addAdmin",admin)
		.then((data )=>{
			console.log(data);
			if(data.code === 2001){
				message.success(data.message)
			}

		})
	};
  
	const prefixSelector = (

	  <Form.Item name="prefix" noStyle>
		<Select
		  style={{
			width: 70,
		  }}
		>
		  <Option value="86">+86</Option>
		  <Option value="87">+87</Option>
		</Select>
	  </Form.Item>
	);


	const [autoCompleteResult, setAutoCompleteResult] = useState([]);
	const [loading , setLoading] = useState(false);
	const [imageUrl , setImageUrl] = useState();

	
  



  return (
	<Form
	{...formItemLayout}
	form={form}
	name="register"
	onFinish={onFinish}
	initialValues={{
	  prefix: '86',
	}}
	scrollToFirstError
	size='defult'
  >
	<Form.Item
	  name="username"
	  label="用户名"
	  rules={[
		{
		  required: true,
		  message: '请输入用户名!',
		},
	  ]}
	>
	  <Input
	 placeholder="输入你的用户名" 
	  style={{ width : "40%"}}/>
	</Form.Item>

	<Form.Item
	  name="password"
	  label="密码"
	  rules={[
		{
		  required: true,
		  message: '请输入密码!',
		},
	  ]}
	  hasFeedback
	>
	  <Input.Password
	  placeholder="输入你的密码"
	  style={{ width : "40%"}}/>
	</Form.Item>

	<Form.Item
	  name="confirm"
	  label="确认密码"
	  dependencies={['password']}
	  hasFeedback
	  rules={[
		{
		  required: true,
		  message: '请确定密码!',
		},
		({ getFieldValue }) => ({
		  validator(_, value) {
			if (!value || getFieldValue('password') === value) {
			  return Promise.resolve();
			}

			return Promise.reject(new Error('输入密码不一致!'));
		  },
		}),
	  ]}
	>
	  <Input.Password 
	 placeholder="再次输入你的密码" 
	  style={{ width : "40%"}}/>
	</Form.Item>

	<Form.Item
	  name="nickname"
	  label="昵称"
	  tooltip="该如何称呼您?"
	  rules={[
		{
		  required: true,
		  message: '请输入你的昵称!',
		  whitespace: true,
		},
	  ]}
	>
	  <Input 
	   style={{ width : "40%"}}
	  placeholder="输入你的昵称"/>
	</Form.Item>



	<Form.Item
	  name="phone"
	  label="手机号码"
	  rules={[
		{
		  required: true,
		  message: '请输入你的手机号码!',
		},
	  ]}
	>
	  <Input
	  placeholder="输入你的手机号码"
		addonBefore={prefixSelector}
		style={{
		  width: '40%',
		}}
	  />
	</Form.Item>

	<Form.Item
	  name="role"
	  label="角色"
	>
	  <Select placeholder="选择角色"
	  style={{ width : "40%"}}>
		<Option value="2">普通管理员</Option>
		<Option value="3">高级管理员</Option>
	  </Select>
	</Form.Item>

	<Form.Item
	  name="sex"
	  label="性别"
	>
	  <Select placeholder="输入你的性别"
	  style={{ width : "40%"}}>
		<Option value="1">男</Option>
		<Option value="2">女</Option>
	  </Select>
	</Form.Item>

	<Form.Item {...tailFormItemLayout}>
	  <Button type="primary" htmlType="submit">
		添加管理员
	  </Button>
	</Form.Item>
  </Form>
);
  
}
